<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        border: 1px solid black;
        margin: 50px auto;
        width: 300px;

    }

    .box>.table {
        font-size: 0px;
    }

    .box>.table>button {
        width: 60px;
        height: 50px;
        font-size: 18px;
        border: none;
        outline: none;
        font-size: 14px;
    }
    .box>.top>button.selected{
            background-color: green;
            color: red;
        }
    .box>.st>div{
        display: none;
        height: 300px;
  background-color: yellow;
       
    }
    .box>.st>div:nth-child(1){
            display: block;
        }
</style>
<script>
    window.onload = function(){
        // 1. 获取所有的按钮
        // var btns = document.querySelectorAll('button');
        var btns = document.getElementsByClassName('table')[0].children
        var divs = document.getElementsByClassName('st')[0].children
        // 2. 对button进行循环遍历，注册点击事件
        for(var i = 0;i<btns.length;i++){
            // 动态的给每一个button按钮添加一个属性，index，并赋值为i
            btns[i].index = i
            btns[i].onclick=function(){
                // 3. 点击时，给当前按钮添加类名,并且去除兄弟元素的该类名
                // 排他思想
                for(var j = 0;j<btns.length;j++){
                    btns[j].className=''
                    divs[j].style.display="none"
                }
                this.className='selected'
                divs[this.index].style.display="block"
            }
        }
    }

 


   


</script>
<body>
    <div class="box">
        <div class="table">
            <button>按钮1</button>
            <button>按钮2</button>
            <button>按钮3</button>
            <button>按钮4</button>
            <button>按钮5</button>
        </div>
        <div class="st">
            <div>盒子1</div>
            <div>盒子2</div>
            <div>盒子3</div>
            <div>盒子4</div>
            <div>盒子5</div>
        </div>


    </div>
</body>

</html><b>wuha</b>